<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini" class="form-view">
      <div class="anthor">
        <anchor type="unstrict" :xleft="1" :ytop="13" :title-list="anchorList" />
        <div class="anthor-info">
          <div id="viewModule1">
            <div class="anthor-info-head"><i class="el-icon-document" /><span>基本信息</span></div>
            <div class="anthor-info-body">
              <el-row :gutter="40">
                <el-col :span="8">
                  <el-form-item label="制单时间：">
                    {{ formItem.createTime }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产编号：">
                    {{ formItem.code }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产大类">
                    {{ formItem.category }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产分类：">
                    {{ formItem.assetTypeCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产名称：">
                    {{ formItem.name }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="序列号：">
                    {{ formItem.sequence }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="套账：">
                    {{ formItem.books }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="品牌：">
                    {{ formItem.brand }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="规格型号：">
                    {{ formItem.specification }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="生成厂家：">
                    {{ formItem.produce }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="设备用途：">
                    {{ formItem.purpose }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="原资产编号：">
                    {{ formItem.originCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="数量：">
                    {{ formItem.quantity }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同名称及编号：">
                    {{ formItem.contractNameAndCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="维保截止日期：">
                    {{ formItem.manufacturerEndDate }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备用字段：">
                    {{ formItem.backup }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否在线：">
                    {{ formItem.running }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注：">
                    {{ formItem.remark }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div id="financeInfo">
            <div class="anthor-info-head"><i class="el-icon-document" /><span>财务信息</span></div>
            <div class="anthor-info-body">
              <el-row :span="8" :gutter="40">
                <el-col :span="8">
                  <el-form-item label="自有价值：">
                    {{ formItem.ownvalue }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="价值类型：">
                    {{ formItem.valuetype }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="价值：">
                    {{ formItem.money }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="折旧状态：">
                    {{ formItem.depreciationstatus }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="已提折旧月数：">
                    {{ formItem.depreciationmonth }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="累计折旧：">
                    {{ formItem.depreciationtotal }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="财政性资金：">
                    {{ formItem.fundsfinancial }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="非财政性资金：">
                    {{ formItem.unfundsfinancial }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="净值：">
                    {{ formItem.equity }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="闲置价值：">
                    {{ formItem.idleValue }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div id="useInfo">
            <div class="anthor-info-head"><i class="el-icon-document" /><span>使用信息</span></div>
            <div class="anthor-info-body">
              <el-row :span="8" :gutter="40">
                <el-col :span="8">
                  <el-form-item label="取得日期：">
                    {{ formItem.getdate }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="取得方式">
                    {{ formItem.sourceDesc }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属单位：">
                    {{ formItem.belongTo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="投入使用日期：">
                    {{ formItem.userdate }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用年限（月）：">
                    {{ formItem.month }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用方向：">
                    {{ formItem.usetype }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用状况：">
                    {{ formItem.statusDesc }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用部门：">
                    {{ formItem.useDeptDesc }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用人：">
                    {{ formItem.userName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="管理部门：">
                    {{ formItem.manageDeptDesc }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div id="officeInfo">
            <div class="anthor-info-head"><i class="el-icon-document" /><span>厅局信息</span></div>
            <div class="anthor-info-body">
              <el-row :span="8" :gutter="40">
                <el-col :span="8">
                  <el-form-item label="移交厅局：">
                    {{ formItem.submmitTo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="原资产卡片单位">
                    {{ formItem.secondDeptDesc }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="厅局机房地址：">
                    {{ formItem.officeComputerRoomAddress }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="厅局地址：">
                    {{ formItem.officeAddress }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div id="transferInfo">
            <div class="anthor-info-head"><i class="el-icon-document" /><span>移交信息</span></div>
            <div class="anthor-info-body">
              <el-row :span="8" :gutter="40">
                <el-col :span="8">
                  <el-form-item label="存放地点：">
                    {{ formItem.located }}
                  </el-form-item> </el-col>
                <el-col :span="8">
                  <el-form-item label="文档是否齐全：">
                    {{ formItem.isDocumentAll }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="业务应用系统：">
                    {{ formItem.businessSystem }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否报废：">
                    {{ formItem.isScrapped }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="制单人：">
                    {{ formItem.creator }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="制单时间：">
                    {{ formItem.handoverDate }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import Anchor from '@neu/biz-core/components/Anchor/index'
import { detail } from '@neu/dcam-ui/api/fixedAsset'
import { formatDate } from '@neu/biz-core/utils/utils'
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import { list } from '@neu/dcam-ui/api/assetType'
import * as locationApi from '@neu/dcam-ui/api/location'
import { listEffective } from '@neu/dcam-ui/api/assetExtFieldConfig'

// 定义一个表单原始项
const formItem = {
  name: '',
  code: '',
  assetTypeCode: null,
  sequence: '',
  locationCode: null,
  productId: '',
  productName: '',
  measureUnit: '',
  money: '',
  orgId: null,
  orgName: '',
  userId: '',
  userName: '',
  month: '',
  manufacturerId: '',
  manufacturerName: '',
  manufacturerPerson: '',
  manufacturerPhone: '',
  maintenanceId: '',
  maintenanceStart: null,
  maintenanceEnd: null,
  maintenanceUserId: '',
  maintenanceUserName: '',
  maintenanceNote: '',
  contractCode: '',
  contractName: '',
  contract: {},
  createTime: '',
  updateTime: '',
  sourceCode: '',
  sourceDesc: '',
  ext1: '',
  ext1TsName: '',
  ext2: '',
  ext2TsName: '',
  ext3: '',
  ext3TsName: '',
  ext4: '',
  ext4TsName: '',
  ext5: '',
  ext5TsName: ''
}
export default {
  name: 'FixedAssetViewForm',
  components: {
    Anchor
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      assetSource: [],
      assetStatus: [],
      anchorList: [ // 锚点列表
        { id: 'viewModule1', label: '基本信息' },
        { id: 'financeInfo', label: '财务信息' },
        { id: 'useInfo', label: '使用信息' },
        { id: 'officeInfo', label: '厅局信息' },
        { id: 'transferInfo', label: '移交信息' }
      ],
      // 查看的表单内容
      formItem: {
        ...formItem
      },
      availableLocations: [],
      availableOganizations: [],
      typeOptions: [],
      /** 有效扩展属性 */
      effictiveExtField: [],
      valueType: [],
      useDepts: [],
      manageDepts: [],
      secondDepts: [],
      thirdDepts: []
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },
  created() {
    list().then(response => {
      const result = response.data
      this.typeOptions = result
    })
    locationApi.list().then(response => {
      this.availableLocations = response.data
    })
    findByDictionaryType('assetSource').then(response => {
      this.assetSource = response.data
    })
    findByDictionaryType('assetStatus').then(response => {
      this.assetStatus = response.data
    })
    findByDictionaryType('valueType').then(res => {
      if (res.status === 'success') {
        this.valueType = res.data
      }
    })
    findByDictionaryType('useDept').then(res => {
      if (res.status === 'success') {
        this.useDepts = res.data
      }
    })
    findByDictionaryType('secondDept').then(response => {
      this.secondDepts = response.data
    })
    findByDictionaryType('thirdDept').then(response => {
      this.thirdDepts = response.data
    })
    findByDictionaryType('manageDept').then(res => {
      if (res.status === 'success') {
        this.manageDepts = res.data
      }
    })
    listEffective().then(response => {
      this.effictiveExtField = response.data
    })

    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          this.formItem = { ... response.data }
          if (this.formItem.contract === null) {
            this.formItem.contract = {}
          }
          this.formItem.createTime = formatDate(this.formItem.createTime)
          this.formItem.userdate = formatDate(this.formItem.userdate, 'YYYY-MM-DD')
          this.formItem.getdate = formatDate(this.formItem.getdate, 'YYYY-MM-DD')
          const valuetype = this.valueType.filter(t => {
            return t.code === this.formItem.valuetype
          })
          this.formItem.valuetype = valuetype.length === 1 ? valuetype[0].text : this.formItem.valuetype

          this.formItem.maintenanceStart = formatDate(this.formItem.maintenanceStart)
          this.formItem.maintenanceEnd = formatDate(this.formItem.maintenanceEnd)
          this.formItem.updateTime = formatDate(this.formItem.updateTime, 'YYYY-MM-DD')
          this.formItem.handoverDate = formatDate(this.formItem.handoverDate, 'YYYY-MM-DD')
          this.formItem.ownvalue = this.format(this.formItem.ownvalue)
          this.formItem.depreciationtotal = this.format(this.formItem.depreciationtotal)
          this.formItem.money = this.format(this.formItem.money)
          this.formItem.fundsfinancial = this.format(this.formItem.fundsfinancial)
          this.formItem.unfundsfinancial = this.format(this.formItem.unfundsfinancial)
          this.formItem.equity = this.format(this.formItem.equity)
          this.formItem.idleValue = this.format(this.formItem.idleValue)
          this.formItem.manufacturerEndDate = formatDate(this.formItem.manufacturerEndDate, 'YYYY-MM-DD')

          const seconds = this.secondDepts.filter(t => {
            return t.code === this.formItem.secondDept
          })
          this.formItem.secondDeptDesc = seconds.length === 1 ? seconds[0].text : this.formItem.secondDept

          const thirds = this.thirdDepts.filter(t => {
            return t.code === this.formItem.thirdDept
          })
          this.formItem.thirdDeptDesc = thirds.length === 1 ? thirds[0].text : this.formItem.thirdDept

          const source = this.assetSource.filter(t => {
            return t.code === this.formItem.sourceDesc
          })
          this.formItem.sourceDesc = source.length === 1 ? source[0].text : this.formItem.sourceDesc

          const status = this.assetStatus.filter(t => {
            return t.code === this.formItem.statusDesc
          })
          this.formItem.statusDesc = status.length === 1 ? status[0].text : this.formItem.statusCode

          const usedepts = this.useDepts.filter(t => {
            return t.code === this.formItem.useDeptDesc
          })
          this.formItem.useDeptDesc = usedepts.length === 1 ? usedepts[0].text : this.formItem.useDepts

          const managedepts = this.manageDepts.filter(t => {
            return t.code === this.formItem.manageDeptDesc
          })
          this.formItem.manageDeptDesc = managedepts.length === 1 ? managedepts[0].text : this.formItem.manageDeptDesc

          const location = this.availableLocations.filter(t => {
            return t.code === this.formItem.locationCode
          })
          this.formItem.locationCode = location.length === 1 ? location[0].name : this.formItem.locationCode

          const type = this.typeOptions.filter(t => {
            return t.code === this.formItem.assetTypeCode
          })
          this.formItem.assetTypeCode = type.length === 1 ? type[0].name : this.formItem.assetTypeCode

          this.effictiveExtField.forEach(item => {
            if (item.dataType === 'dateselect') {
              if (item.sequence === 1) {
                this.formItem.ext1TsName = formatDate(this.formItem.ext1TsName)
              }
              if (item.sequence === 2) {
                this.formItem.ext2TsName = formatDate(this.formItem.ext2TsName)
              }
              if (item.sequence === 3) {
                this.formItem.ext3TsName = formatDate(this.formItem.ext3TsName)
              }
              if (item.sequence === 4) {
                this.formItem.ext4TsName = formatDate(this.formItem.ext4TsName)
              }
              if (item.sequence === 5) {
                this.formItem.ext5TsName = formatDate(this.formItem.ext5TsName)
              }
            }
          })
        })
      } else {
        this.formItem = { ...formItem }
      }
    },
    format(value) {
      const val = value
      if (val) {
        const result = val.toFixed(2).toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
          return $1 + ','
        }).replace(/\.$/, '')
        return result
      } else {
        return '-'
      }
    }
  }
}
</script>
